<template>
  <div class="add-product">
    <h1>添加农产品</h1>
    
    <div class="card">
      <form @submit.prevent="createProduct">
        <div class="form-group">
          <label for="id">产品ID*</label>
          <div class="id-input-group">
            <input 
              type="text" 
              id="id" 
              v-model="formData.id" 
              placeholder="输入产品唯一ID，如001"
              required
            >
           
          </div>
          <small class="form-text">ID不能与已有产品重复</small>
        </div>
        
        <div class="form-group">
          <label for="name">产品名称*</label>
          <input 
            type="text" 
            id="name" 
            v-model="formData.name" 
            placeholder="输入产品名称"
            required
          >
        </div>
        
        <div class="form-group">
          <label for="producer">生产商*</label>
          <input 
            type="text" 
            id="producer" 
            v-model="formData.producer" 
            placeholder="输入生产商名称"
            required
          >
        </div>
        
        <div class="form-group">
          <label for="productionDate">生产日期*</label>
          <input 
            type="date" 
            id="productionDate" 
            v-model="formData.productionDate" 
            required
          >
        </div>
        
        <div class="form-group">
          <label for="origin">原产地*</label>
          <input 
            type="text" 
            id="origin" 
            v-model="formData.origin" 
            placeholder="输入产品原产地"
            required
          >
        </div>
        
        <div class="form-actions">
          <button type="button" class="btn btn-secondary" @click="resetForm">重置</button>
          <button type="submit" class="btn btn-primary" :disabled="submitting">
            {{ submitting ? '添加中...' : '添加产品' }}
          </button>
        </div>
      </form>
    </div>
    
    <div class="card instruction-card">
      <h2>说明</h2>
      <ul>
        <li>所有标有*的字段为必填项</li>
        <li>产品ID必须是唯一的，添加后无法修改</li>
        <li>产品添加后将被记录到区块链上，确保信息准确无误</li>
        <li>添加产品需要支付一定的 Gas 费用</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { productApi, systemApi } from '@/services/api'

export default {
  name: 'AddProduct',
  data() {
    return {
      formData: this.getInitialFormData(),
      submitting: false,
      contractOwner: null, // 存储合约所有者
      updatedName: '',
      updatedProducer: '',
      updatedOrigin: '',
      hasUpdates: false,
      verifyData: {
        name: '',
        producer: '',
        origin: ''
      }
    };
  },
  mounted() {
    // 组件挂载时获取合约所有者
    this.getContractOwner();
  },
  methods: {
    // 获取合约所有者
    async getContractOwner() {
      try {
        const response = await systemApi.getOwner();
        if (response && response.code === '0' && response.data) {
          this.contractOwner = response.data;
          console.log('获取到合约所有者:', this.contractOwner);
        } else {
          console.warn('获取合约所有者失败:', response);
        }
      } catch (error) {
        console.error('获取合约所有者错误:', error);
      }
    },
    
    formatDate(date) {
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    getInitialFormData() {
      return {
        id: '',
        name: '',
        producer: '',
        productionDate: this.formatDate(new Date()),
        origin: ''
      };
    },
    resetForm() {
      this.formData = this.getInitialFormData();
    },
    async createProduct() {
      // 表单验证
      if (!this.formData.id || !this.formData.name || !this.formData.producer || 
          !this.formData.productionDate || !this.formData.origin) {
        alert('请填写所有必填字段');
        return;
      }
      
      // 防止重复提交
      if (this.submitting) {
        return;
      }
      
      // 检查产品ID是否已存在
      const productId = this.formData.id;
      if (await this.checkProductIdExists(productId)) {
        alert(`产品ID "${productId}" 已存在，请使用其他ID`);
        return;
      }
      
      this.submitting = true;
      
      try {
        // 将日期转换为时间戳 (秒)
        const dateObj = new Date(this.formData.productionDate);
        console.log('日期对象:', dateObj, 'ISO格式:', dateObj.toISOString());
        
        // 转换为秒级时间戳（区块链通常使用秒级时间戳）
        const productionDateMillis = dateObj.getTime(); // 毫秒时间戳
        console.log('毫秒时间戳:', productionDateMillis);
        
        // 正确的秒级时间戳
        const productionDateSeconds = Math.floor(productionDateMillis / 1000);
        console.log('秒级时间戳:', productionDateSeconds);
        
        // 创建产品数据对象，确保字段顺序与智能合约一致
        // 根据智能合约方法：createProduct(string _id, string _name, string _producer, uint256 _productionDate, string _origin)
        const productData = {
          id: productId, // 产品ID
          name: this.formData.name, // 产品名称 - 第1个参数
          producer: this.formData.producer, // 生产商 - 第2个参数
          productionDate: productionDateSeconds, // 生产日期 - 第3个参数
          productionDateStr: productionDateSeconds.toString(), // 备用日期字符串
          origin: this.formData.origin, // 原产地 - 第4个参数
          owner: this.contractOwner // 设置合约所有者为产品初始所有者
        };
        
        console.log('添加产品请求数据:', productData);
        console.log('日期信息:',{
          原始日期: this.formData.productionDate,
          日期对象: dateObj.toString(),
          毫秒时间戳: productionDateMillis,
          秒级时间戳: productionDateSeconds,
          ISO格式: dateObj.toISOString()
        });
        console.log('所有者信息:', this.contractOwner);
        
        const response = await productApi.addProduct(productData);
        
        console.log('添加产品响应:', response);
        
        // 保存原产地信息到localStorage，因为后端存储存在字段映射问题
        this.saveOrigin(productId, this.formData.origin);
        
        alert(`产品 "${this.formData.name}" 已成功添加到系统，ID: ${productId}`);
        
        // 等待一段时间，验证产品是否添加成功
        setTimeout(async () => {
          try {
            // 从 localStorage 获取最新的真实值
            const savedName = this.getSavedValue(`name_${productId}`, this.formData.name);
            const savedProducer = this.getSavedValue(`producer_${productId}`, this.formData.producer);
            
            // 使用最新值进行验证
            const verifyResponse = await productApi.verifyDataIntegrity({
              id: productId,
              name: savedName, // 使用最新的产品名称
              producer: savedProducer, // 使用最新的生产商
              origin: this.formData.origin,
              productionDate: productionDateSeconds.toString(),
              productionDateStr: productionDateSeconds.toString(),
              owner: this.contractOwner
            });
            console.log('验证新产品:', verifyResponse);
          } catch (e) {
            console.error('验证新产品失败:', e);
          }
          
          // 重置表单并跳转到产品列表页面
          this.resetForm();
          this.$router.push({
            path: '/products',
            query: { refresh: 'true', t: Date.now() } // 添加查询参数强制刷新
          });
        }, 1000);

        // 更新验证表单数据
        this.verifyData = {
          ...this.verifyData,
          name: this.formData.name,
          producer: this.formData.producer,
          origin: this.formData.origin
        };

        this.$forceUpdate(); // 强制当前组件重新渲染

        this.$nextTick(() => {
          // 此时DOM已更新
          console.log('管理选项应该已隐藏');
        });
      } catch (error) {
        console.error('添加产品失败:', error);
        alert('添加产品失败: ' + (error.response?.data?.message || error.message || '未知错误'));
      } finally {
        this.submitting = false;
      }
    },
    
    // 安全地保存localStorage数据
    saveOrigin(productId, origin) {
      try {
        localStorage.setItem(`origin_${productId}`, origin);
      } catch (e) {
        console.error('保存原产地信息错误:', e);
      }
    },
    
    // 安全地获取localStorage数据，提供默认值
    getSavedValue(key, defaultValue) {
      try {
        const value = localStorage.getItem(key);
        return value !== null ? value : defaultValue;
      } catch (e) {
        console.error(`获取存储值错误 (${key}):`, e);
        return defaultValue;
      }
    },
    
    // 检查产品ID是否已存在
    async checkProductIdExists(productId) {
      console.log('检查产品ID是否存在:', productId);
      
      try {
        // 首先检查本地存储中是否已有该ID的产品信息
        const existsInLocalStorage = this.checkLocalStorageForProduct(productId);
        if (existsInLocalStorage) {
          console.log(`产品ID "${productId}" 在本地存储中已存在`);
          return true;
        }
        
        // 然后尝试从API获取该ID的产品详情
        try {
          const response = await productApi.getProductDetail(productId);
          if (response && response.code === '0' && response.data) {
            console.log(`产品ID "${productId}" 在后端API中已存在`, response.data);
            return true;
          }
        } catch (apiError) {
          // API错误可能意味着产品不存在，这是正常的
          console.log('API未找到产品，这可能意味着ID不存在:', apiError.message);
        }
        
        // 如果都没找到，则ID不存在
        console.log(`产品ID "${productId}" 可用`);
        return false;
      } catch (error) {
        console.error('检查产品ID存在性时出错:', error);
        // 如果检查过程出错，为安全起见，假定ID不存在
        return false;
      }
    },
    
    // 检查本地存储中是否存在产品信息
    checkLocalStorageForProduct(productId) {
      try {
        // 检查常见的存储键
        const keysToCheck = [
          `product_${productId}`,
          `name_${productId}`,
          `producer_${productId}`,
          `origin_${productId}`,
          `owner_${productId}`
        ];
        
        for (const key of keysToCheck) {
          if (localStorage.getItem(key) !== null) {
            console.log(`在本地存储中找到键 "${key}"`);
            return true;
          }
        }
        
        return false;
      } catch (e) {
        console.error('检查本地存储时出错:', e);
        return false;
      }
    },
    
    // 清除特定产品ID相关的localStorage数据
    clearProductData() {
      const productId = this.formData.id;
      if (!productId) {
        alert('请先输入产品ID');
        return;
      }
      
      try {
        console.log(`开始清除产品ID "${productId}" 的本地存储数据`);
        
        // 要清除的键列表
        const keysToDelete = [
          `product_${productId}`,
          `name_${productId}`,
          `producer_${productId}`,
          `origin_${productId}`,
          `owner_${productId}`,
          `previous_owner_${productId}`,
          `last_transfer_txhash_${productId}`,
          `inspections_${productId}`,
          `product_deleted_${productId}`
        ];
        
        // 记录删除情况
        let deletedCount = 0;
        let deletedKeys = [];
        
        // 尝试删除每个键
        for (const key of keysToDelete) {
          if (localStorage.getItem(key) !== null) {
            localStorage.removeItem(key);
            deletedCount++;
            deletedKeys.push(key);
            console.log(`已删除键: ${key}`);
          }
        }
        
        // 显示删除结果
        if (deletedCount > 0) {
          console.log(`成功清除了 ${deletedCount} 条数据:`, deletedKeys);
          alert(`已清除产品ID "${productId}" 的 ${deletedCount} 条本地数据`);
        } else {
          console.log(`未找到产品ID "${productId}" 的本地存储数据`);
          alert(`未找到产品ID "${productId}" 的本地存储数据`);
        }
      } catch (error) {
        console.error('清除本地存储数据时出错:', error);
        alert('清除本地存储数据时出错: ' + error.message);
      }
    }
  }
}
</script>

<style scoped>
.add-product {
  max-width: 800px;
  margin: 0 auto;
}

.card {
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.instruction-card {
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

.id-input-group {
  display: flex;
  gap: 0.5rem;
}

.id-input-group input {
  flex: 1;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.form-text {
  font-size: 0.8rem;
  color: #5f9ea0; /* 浅蓝色文字 */
  margin-top: 0.25rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

ul {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
  color: #5f9ea0; /* 浅蓝色文字 */
}

input[type="text"], 
input[type="date"], 
textarea {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
  transition: border-color 0.2s;
}

input[type="text"]:focus, 
input[type="date"]:focus, 
textarea:focus {
  outline: none;
  border-color: #20b2aa; /* 浅绿色边框 */
  box-shadow: 0 0 0 2px rgba(32, 178, 170, 0.2); /* 浅绿色阴影 */
}

label {
  font-weight: 600;
  color: #20b2aa; /* 浅绿色文字 */
  margin-bottom: 0.5rem;
  display: block;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary {
  background-color: #20b2aa; /* 浅绿色背景 */
  color: white;
}

.btn-primary:hover {
  background-color: #008080; /* 深绿色背景 */
}

.btn-secondary {
  background-color: #f0f8ff; /* 浅蓝色背景 */
  color: #20b2aa; /* 浅绿色文字 */
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.btn-secondary:hover {
  background-color: #e0f0ff; /* 稍深蓝色背景 */
}

@media (min-width: 768px) {
  form {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-actions {
    grid-column: span 2;
  }
}
</style> 